<template>
  <div>
    <h1>【aty-date-picker】 component demo</h1>
    <p>【aty-date-picker】 本质</p>
    <aty-row class="fd-date-picker">
      <aty-title level="4">1.aty-date-picker  default 状态 </aty-title>
      <aty-panel>选择或输入日期，支持年、月、日期等类型，支持选择范围。</aty-panel>
      <aty-row>
        <aty-col span="8">
          <aty-date-picker type="date" label="asdf" required placeholder="选择日期" style="width: 200px" />
        </aty-col>
        <aty-col span="12">
          <aty-date-picker type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px" />
        </aty-col>
      </aty-row>

      <aty-row>
        <aty-title level="4">2.aty-date-picker  快捷方式 </aty-title>
        <aty-row>
          <aty-col span="8">
            <aty-date-picker
              :transfer="true"
              type="date"
              :options="options1"
              placeholder="选择日期"
              style="width: 200px" />
          </aty-col>
          <aty-col span="12">
            <aty-date-picker
              type="daterange"
              :options="options2"
              placement="bottom-end"
              placeholder="选择日期"
              style="width: 200px" />
          </aty-col>
        </aty-row>
      </aty-row>

      <aty-row>
        <aty-title level="4">3.aty-date-picker  日期格式 </aty-title>
        <aty-row>
          <aty-col span="8">
            <aty-date-picker
              :value="value1"
              format="yyyy年MM月dd日"
              type="date"
              placeholder="选择日期"
              style="width: 200px" />
          </aty-col>
          <aty-col span="12">
            <aty-date-picker
              :value="value2"
              format="yyyy/MM/dd"
              type="daterange"
              placement="bottom-end"
              placeholder="选择日期"
              style="width: 200px" />
          </aty-col>
        </aty-row>

        <aty-row>
          <br />
          <br />
          <aty-date-picker type="datetime" placeholder="选择日期和时间" :disabledHours="[1,2,3,4]" :start-date="new Date('2019/08/11')" style="width: 200px" />
          <br />
          <br />
          <aty-date-picker type="datetime" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 200px" />
          <br />
          <br />
          <aty-date-picker type="datetimerange" placeholder="选择日期和时间" style="width: 300px" />
          <br />
          <br />
          <aty-date-picker type="datetimerange" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 300px" />
          <br />
          <br />
          <aty-date-picker type="onlytimerange" format="yyyy-MM-dd HH:mm" placeholder="选择单日期和时间范围（不含秒）" style="width: 300px" />
        </aty-row>

      </aty-row>

      <aty-row>
        <aty-title level="4">4.aty-date-picker     年和月视图 </aty-title>
        <aty-row>
          <aty-col span="8">
            <aty-date-picker type="year" placeholder="选择年" style="width: 200px" />
          </aty-col>
          <aty-col span="12">
            <aty-date-picker type="month" placeholder="选择年" style="width: 200px" />
          </aty-col>
        </aty-row>
      </aty-row>

      <aty-row>
        <aty-title level="4">5.aty-date-picker   不可选日期  </aty-title>
        <aty-row>
          <aty-col span="8">
            <aty-date-picker type="date" :options="options3" placeholder="选择日期" style="width: 200px" />
          </aty-col>
          <aty-col span="12">
            <aty-date-picker type="date" :options="options4" placeholder="选择日期" style="width: 200px" />
          </aty-col>
        </aty-row>
      </aty-row>

      <aty-row>
        <aty-title level="4">6.aty-date-picker   带有确认操作</aty-title>
        <aty-row>
          <aty-col span="8">
            <aty-date-picker type="date" confirm placeholder="选择日期" style="width: 200px" />
          </aty-col>
          <aty-col span="12">
            <aty-date-picker
              type="daterange"
              confirm
              placement="bottom-end"
              placeholder="选择日期"
              style="width: 200px" />

          </aty-col>
        </aty-row>
      </aty-row>

      <aty-row>
        <aty-title level="4">6.aty-date-picker   手动控制组件 </aty-title>
        <aty-row>
          <aty-col span="8">
            <aty-date-picker
              :open="open"
              :value="value3"
              confirm
              type="date"
              @change="handleChange"
              @clear="handleClear"
              @ok="handleOk">

              <a href="javascript:void(0)" @click="handleClick">
                <aty-icon type="ios-calendar-outline" />
                <aty-text v-if="value3 === ''">选择日期</aty-text>
                <aty-text v-else>{{ value3 }}</aty-text>
              </a>
            </aty-date-picker>
          </aty-col>
        </aty-row>
      </aty-row>

      <aty-row>
        <aty-title level="4">7.aty-date-picker   大小 </aty-title>
        <aty-row>
          <aty-col span="8">
            <aty-date-picker size="small" type="date" confirm placeholder="选择日期" style="width: 200px" />
          </aty-col>
          <aty-col span="8">
            <aty-date-picker size="default" type="date" confirm placeholder="选择日期" style="width: 200px" />
          </aty-col>
          <aty-col span="8">
            <aty-date-picker size="large" type="date" confirm placeholder="选择日期" style="width: 200px" />
          </aty-col>
        </aty-row>
      </aty-row>
    </aty-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      value1: '2016-01-01',
      value2: ['2016-01-01', '2016-02-15'],
      options1: {
        shortcuts: [
          {
            text: '今天',
            value () {
              return new Date()
            },
            onClick: (picker) => {
              this.$Message.info('点击了今天')
            }
          },
          {
            text: '昨天',
            value () {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              return date
            },
            onClick: (picker) => {
              this.$Message.info('点击了昨天')
            }
          },
          {
            text: '一周前',
            value () {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              return date
            },
            onClick: (picker) => {
              this.$Message.info('点击了一周前')
            }
          }
        ]
      },

      options2: {
        shortcuts: [
          {
            text: '最近一周',
            value () {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              return [start, end]
            }
          },
          {
            text: '最近一个月',
            value () {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              return [start, end]
            }
          },
          {
            text: '最近三个月',
            value () {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              return [start, end]
            }
          }
        ]
      },
      options3: {
        disabledDate (date) {
          return date && date.valueOf() < Date.now() - 86400000
        }
      },
      options4: {
        disabledDate (date) {
          const disabledDay = date.getDate()
          return disabledDay === 15
        }
      },
      open: false,
      value3: ''

    }
  },
  methods: {
    handleClick () {
      this.open = !this.open
    },
    handleChange (date) {
      this.value3 = date
    },
    handleClear () {
      this.open = false
    },
    handleOk () {
      this.open = false
    },
  }
}
</script>
<style   lang="less"  type="text/less" >
    /*出错*/
    .fd-date-picker {
        padding: 20px;
        text-align: left;
        >.aty-row {
            padding: 20px 0;
        }
    }

</style>
